import React, { useEffect, useState } from 'react'
import { useDispatch } from 'umi'
import { Button, Modal,Input  } from 'antd'
import { Table, Tag, Space } from 'antd';
import { getExamType } from '../../services/index'

const columns = [
  {
    title: '类型ID',
    dataIndex: 'questions_type_id',
    key: 'questions_type_id',
    render: (text: any) => <a>{text}</a>,
  },
  {
    title: '类型名称',
    dataIndex: 'questions_type_text',
    key: 'questions_type_text',
  },
  {
    title: '操作',
    dataIndex: '',
    key: '',
  }
];


const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        + 添加类型
      </Button>
      <Modal title="创建新类型" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Input placeholder="请输入新类型" />
      </Modal>
    </>
  );
};


const QuestionType: React.FC = () => {

  const [getExam, setExam] = useState<any[]>([]);

  // 通过useDispatch拿到派发redux的dispatch
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType'
    });
  }, []);

  useEffect(() => {
    getExamType().then(res => {
      setExam(res.data)
      console.log(res.data)
    })
  }, []);

  return (
    <div>
      {/* <h1>试题分类</h1> */}
       <App /> 
      <Table columns={columns} dataSource={getExam} />
      
    </div>
  );
}

export default QuestionType;
